<template>
    <el-button type="success" @click="GetAddMenu()">新增菜单</el-button>
    <el-table :data="tableData" style="width: 100%">
    <el-table-column fixed type="index" label="编号" width="60" />
    <el-table-column prop="menuName" label="菜单名称" width="120" />
    <el-table-column prop="url" label="菜单Url" width="150" />
    <el-table-column prop="pname" label="父级菜单名称" width="120" />
    <el-table-column prop="createPeople" label="创建人" width="120" />
    <el-table-column prop="createTime" label="创建日期" width="180" >
        <template v-slot="scope">
            {{scope.row.createTime.substring(0,10)+" "+scope.row.createTime.substring(11,19)}}
        </template>
    </el-table-column>
    <el-table-column prop="updatePeople" label="修改人" width="120" />
    <el-table-column prop="updateTime" label="修改日期" width="180" >
        <template v-slot="scope">
            <div v-if="scope.row.updateTime!=null">
                {{scope.row.updateTime.substring(0,10)+" "+scope.row.updateTime.substring(11,19)}}
            </div>
        </template>
    </el-table-column>
    <el-table-column fixed="right" label="操作" min-width="120">
      <template #default="scope">
        <el-button link type="primary" size="small" @click="UpdateMenu(scope.row)">
            修改
        </el-button>
        <el-button link type="danger" size="small" @click="DeleteMeun(scope.row.menuId)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>


<!-- 修改弹窗 -->
<el-dialog v-model="dialogFormVisible" title="更新菜单" width="500">
    <el-form :model="form">

        <el-form-item label="父级菜单" prop="pid">
      <el-select v-model="form.pid" placeholder="请选择父级菜单" >
        <el-option   v-for="item in menuName" :label="item.menuName" :value="item.menuId"  />

      </el-select>
    </el-form-item>

    <el-form-item label="菜单名称" prop="menuName">
        <el-input v-model="form.menuName" />
      </el-form-item>

      <el-form-item label="跳转路由" prop="url">
        <el-input v-model="form.url" />
      </el-form-item>
      
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="GetUpdateMenu()">
          更新
        </el-button>
      </div>
    </template>
  </el-dialog>




<!-- 分页 -->
  <div class="demo-pagination-block">
    <el-pagination
      v-model:current-page="page.pageindex"
      v-model:page-size="page.pagesize"
      :page-sizes="[15, 20, 30, 40]"
      
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.totalcount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      prev-text="上一页"
      next-text="下一页"
    />
  </div>

  </template>
  
  <script lang="ts" setup>
  import { onMounted, reactive, ref } from 'vue'
  import { ElMessage,ElMessageBox, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
  import axios from 'axios'
  import {useRouter,useRoute} from 'vue-router'
import {useCounterStore} from '@/stores/counter'
let router=useRouter();
let Store=useCounterStore();

//钩子
onMounted(()=>{
    getlist();
})
//分页数据
const page=reactive({
    pageindex:1,
    pagesize:15,
    totalcount:0,
    totalpage:0,
})
//显示
const getlist=()=>{
axios({
    url:'http://localhost:5284/api/Menu/QueryMenu',
    method:'get',
    params:{
        Pageindex:page.pageindex,
        Pagesize:page.pagesize
    }
})
.then(res=>{
    if(res.data.code==101){
        tableData.value=res.data.list;
        page.totalcount=res.data.totalCount;
        page.totalpage=res.data.totalPage;
    }
})
  }
  //监听页容量
  const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  page.pagesize=val;
  getlist();
}
//监听当前页
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  page.pageindex=val;
  getlist();
}
//存储菜单列表的变量
  const tableData = ref([])

//删除
const DeleteMeun=(menuId:any)=>{
    ElMessageBox.confirm(
    '您确定要操作吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {

        axios({
        url:'http://localhost:5284/api/Menu/QueryMenuChildren',
        method:'get',
        params:{
        MenuId:menuId
        }
    })
    .then(res=>{
        if(res.data.data>0){
            ElMessageBox.confirm(
    '当前菜单名下有子级菜单，您确定要全部删除吗?',
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
   .then(() => {
        axios({
        url:'http://localhost:5272/api/Menu/DeleteMenu',
        method:'delete',
        data:{
            menuId:menuId
        }
    })
    .then(res=>{
        if(res.data.code=101){
            ElMessage({
        type: 'success',
        message: '删除成功',
      })
      getlist();
        }
    })

    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
        }
        else{
        axios({
        url:'http://localhost:5272/api/Menu/DeleteMenu',
        method:'delete',
        data:{
            menuId:menuId
        }
    })
    .then(res=>{
        if(res.data.code=101){
            ElMessage({
        type: 'success',
        message: '删除成功',
      })
      getlist();
        }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消操作',
      })
    })
        }
    })  
    })
}


//修改弹窗
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
//修改传给后端的数据
const form = reactive({
    menuId:'',
    menuName: '',
    url: '',
    pid: '',
    updatePeople: ''
})

//修改数据
const UpdateMenu=(row:any)=>{
    getMenuName()
    form.menuId=row.menuId, 
    form.menuName=row.menuName,
    form.url=row.url,
    form.pid=row.pid,
    form.updatePeople=Store.CurrLoginUser.UserName
    dialogFormVisible.value=true
}
//修改弹窗下拉框数据
const getMenuName=()=>{
    axios({
        url:'http://localhost:5284/api/Menu/QueryMenuName',
        method:'get',
    })
    .then(res=>{
        if(res.data.code==101){
            menuName.value=res.data.list
        }
    })
}
const menuName=ref([])

const GetUpdateMenu=()=>{
    axios({
        url:'http://localhost:5272/api/Menu/UpdateMenu',
        method:'put',
        data:form
    })
    .then(res=>{
        if(res.data.code==101){
            ElMessage.success(res.data.message)
            getlist();
            dialogFormVisible.value=false;
        }
        else{
            ElMessage.error(res.data.message)
        }
    })
}


const GetAddMenu=()=>{
    router.push('/AddMenu')
}

  </script>
  